<template>
	<view style="padding: 24rpx 32rpx 40rpx 32rpx">
		<form @submit="formSubmit">
			<view class="blocks">
				<view class="block_input">
					<view><text>*</text>案例类型：</view>
					<picker @change="bindCaseTypeChange" :value="caseType" :range="caseTypeList">
						<view>
							<input disabled type="text" name="caseType" :value="caseTypeList[caseType]" placeholder="请选择类型"/>
							<u-icon @click="showCaseType=true" style="z-index:90;position: absolute;right: 50rpx;margin-top: -60rpx;" name="arrow-down" color="#CCCCCC" size="40"></u-icon>
						</view>
					</picker>
				</view>
				
				<view class="block_input">
					<view><text>*</text>标题：</view>
					<input type="text" name="title" value="" placeholder="请输入标题"/>
				</view>
				
				<view class="block_input">
					<view>封面：</view>
					<u-upload :action="uploadFilePath" maxCount="1" :header="uploadFileHeader" :formData="formData"
					:multiple="true" :uploadText="uploadText" :delBgColor="delBgColor" :delColor="delColor"
					@on-success="onUploaded" @on-remove="removeLogo"></u-upload>
				</view>
				
				<view class="block_input">
					<view><text>*</text>车型：</view>
					<picker @change="bindCarTypeChange" :value="carType" :range="carTypeList">
						<view>
							<input disabled type="text" name="type" :value="carTypeList[carType]" placeholder="请选择车型"/>
							<u-icon @click="showCarType=true" style="z-index:90;position: absolute;right: 50rpx;margin-top: -60rpx;" name="arrow-down" color="#CCCCCC" size="40"></u-icon>
						</view>
					</picker>
				</view>
				
				<view class="block_input">
					<view><text>*</text>品牌：</view>
					<input type="text" name="brand" value="" placeholder="请输入品牌"/>
				</view>
				
				<view class="block_input">
					<view><text>*</text>颜色：</view>
					<picker @change="bindColorTypeChange" :value="colorType" :range="colorTypeList">
						<view>
							<input disabled type="text" name="color" :value="colorTypeList[colorType]" placeholder="请选择颜色"/>
							<u-icon @click="showColorType=true" style="z-index:90;position: absolute;right: 50rpx;margin-top: -60rpx;" name="arrow-down" color="#CCCCCC" size="40"></u-icon>
						</view>
					</picker>
				</view>
				
				<view class="block_input">
					<view>图片(多张)：</view>
					<u-upload :action="uploadFilePath" :header="uploadFileHeader" :formData="formData"
					:multiple="true" :uploadText="uploadText" :delBgColor="delBgColor" :delColor="delColor"
					@on-success="onImgUploaded" @on-remove="removeImg"></u-upload>
				</view>
				
				<view class="block_input">
					<view>视频(mp4)：</view>
					<view class="video_upload" @click="uploadVideo">
						<u-icon name="/static/上传.png" size="32" style="margin-right: 16rpx;"></u-icon>
						<text style="color: rgba(0,0,0,0.26);font-size: 24rpx;">上传</text>
					</view>
					<view v-if="video!==''" style="color: #FBCB11;" class="video_label">
						{{ video }}
						<u-icon @click="removeVideo" name="close" color="red" size="22" class="video_close"></u-icon>
					</view>
				</view>
			</view>
			
			<button class="submit" form-type="submit">提交</button>
		</form>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import configService from '../../../common/config.service'
import store from '../../../store'
	export default {
		data() {
			return {
				caseTypeList:[
					"改色膜案例",
					"漆面膜案例",
					"其他膜案例",
					"颜色定制"
				],
				caseType:0, //案例类型
				carTypeList:[
					"WEY","Jeep","MINI","smart","三菱","东方","丰田","五菱","别克","哈弗","大众","奔驰","奥迪",
					"宝马","宾利","悍马","捷豹","日产","本田","林肯","标致","欧拉","现代","玛莎拉蒂","理想汽车",
					"科尼赛克","英菲尼迪","雷克萨斯","阿斯顿·马丁","阿尔法·罗密欧","福特","红旗","蔚来","讴歌",
					"起亚","路虎","道奇","铃木","零跑","雷诺","领克","保时捷","布加迪","帕加尼","斯巴鲁","斯柯达",
					"比亚迪","沃尔沃","法拉利","特斯拉","路特斯","迈凯伦","雪佛兰","雪铁龙","马自达","克莱斯勒",
					"兰博基尼","凯迪拉克","劳斯莱斯","小鹏汽车","广汽传祺"
				],
				carType:0, //车型
				colorTypeList:[
					"棕色","橙色","灰色","白色","粉色","紫色",
					"红色","绿色","蓝色","银色","黄色","黑色",
					"特效色","玫瑰金","蒂芙尼","金色"
				],
				limitType:["mp4"],
				colorType:0, //颜色
				showCaseType:false,
				showCarType:false,
				showColorType:false,
				uploadFilePath:configService.crmUrl+'/sys/common/upload',
				uploadFileHeader:{
					'X-Requested-With':'XMLHttpRequest',
					'X-Access-Token':store.state.phone_login_token,
					'x-requested-with':'xmlhttprequest'
				},
				formData:{'biz':"temp"},
				uploadText:"上传",
				delBgColor:"#FFFFFF00",
				delColor:"#000000",
				logo: '', // 封面图片
				img:[],// 图片(多张),
				video:'',// 视频
				uForm:{}
			}
		},
		methods: {
			// 刷新
			clear(){
				this.logo = '';
				this.img = [];
				this.video = '';
				this.caseType = 0;
				this.colorType = 0;
				this.carType = 0;
			},
			
			// 选择案例类型
			bindCaseTypeChange(e) {
				this.caseType = e.detail.value
			},
			
			// 选择车型
			bindCarTypeChange(e) {
				this.carType = e.detail.value
			},
			
			// 选择颜色
			bindColorTypeChange(e) {
				this.colorType = e.detail.value
			},
			
			// 文件上传
			onUploaded(data){
				if(data.success) this.logo = data.message;
			},
			
			// 图片(多选)上传
			onImgUploaded(data){
				if(data.success) this.img.push(data.message);
			},
			
			// 视频上传
			uploadVideo(){
				let that = this;
				uni.chooseMedia({
				    count: 1,
				    mediaType: ['mp4'],
				    sourceType: ['album', 'camera'],
				    camera: 'back',
				    success(res) {
						if(res.tempFiles[0].fileType!=='video'){
							this.$refs.uToast.show({type:'warning',title: "视频上传格式错误!"});
							return;
						}
						that.uploadFile(res.tempFiles[0].tempFilePath);
				    }
				})
			},
			
			// 上传视频
			async uploadFile(filePath) {
			    let that = this;
			    await uni.uploadFile({
			      url: configService.crmUrl+'/sys/common/upload',
			      filePath: filePath, 
			      name: 'file',
			      header:{'X-Requested-With':'XMLHttpRequest','X-Access-Token':store.state.phone_login_token},
			      formData:{'biz':"temp"},
			      success: async(res) => {
			        if(res.statusCode == 200){
			          that.video = await JSON.parse(res.data).message;
			        } else {
			          that.$refs.uToast.show({type:'error',title: "视频上传失败，请重试!"});
			        }
			      },
			      fail: function (res) {
			        that.$refs.uToast.show({type:'error',title: "视频上传失败，请重试!"});
			      }
			    })
			  },
			
			// 删除logo
			removeLogo(){
				this.logo = '';
			},
			
			// 删除图片(多选)
			removeImg(index){
				this.img.splice(index, 1);
			},
			
			// 删除图片(多选)
			removeVideo(){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '您确定要删除此项吗？',
					success: async (res) => {
						if (res.confirm) {
							this.video = '';
							that.$refs.uToast.show({type:'success',title: "已移除视频"});
						}
					}
				});
			},
			
			async formSubmit(e){
				let data = e.detail.value;
				data.caseType = Number(this.caseType)+1;
				data.isNew = 0;
				data.audit = 0;
				if(this.logo!=='')data.logo = this.logo;
				if(this.img.length>0)data.img = this.img.join(',');
				if(this.video!=='')data.video = this.video;
				console.log(data)
				if(Object.values(data).includes('')){
					this.$refs.uToast.show({type:'warning',title: "请完善信息!"});
					return;
				}
				let res = await this.$api.addCase(data);
				if(res.code){
					this.clear();
					uni.navigateBack({complete() {
						uni.showToast({
							title:"提交成功,等待管理员审核!"
						})
					}});
				}else{
					this.$refs.uToast.show({type:'error',title: "提交失败!"});
				}
			},
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
.blocks{
	margin-top: 30rpx;
	display: flex;
	flex-direction: column;
	.block_title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 36rpx;
		color: #000000;
		line-height: 40rpx;
		margin-bottom: 32rpx;
	}
	.block_input{
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		margin-bottom: 32rpx;
		view{
			font-family: PingFang SC, PingFang SC;
			font-size: 32rpx;
			color: #000000;
			line-height: 40rpx;
			margin-bottom: 16rpx;
			text{
				vertical-align: middle;
				color: #FE020E;
				font-weight: bold;
				margin-right: 8rpx;
			}
		}
		input{
			height: 92rpx;
			background: #F8F9FB;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			color: rgba(0,0,0,0.8);
			padding:0 32rpx;
			font-size: 32rpx;
		}
		.checkbox_group{
			display: flex;
			justify-content: space-evenly;
			flex-wrap: wrap;
		}
	}
}
.submit{
	width: 100%;
	background-color: #FBCB11;
	height: 80rpx;
	font-size: 28rpx;
	color: #020202;
	border-radius: 40rpx 40rpx 40rpx 40rpx;
	margin-top: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	&::after{
		display: none;
	}
}
.video_upload{
	color: rgba(0,0,0,0.26);
	width: 192rpx;
	height: 66rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #F8F9FB;
	border-radius: 4rpx 4rpx 4rpx 4rpx;
}
.video_label{
	width: 90%;
	margin-top: 20rpx;
	color: #FBCB11;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	.video_close{
		margin-left: 16rpx;
		position: absolute;
		right: 30rpx;
		margin-top: 15rpx;
	}
}
</style>
